<template>
    <div>
        <a-list
                v-if="comments.length"
                :data-source="comments"
                :header="`${comments.length} ${comments.length > 1 ? '回复' : '回复'}`"
                item-layout="horizontal"
        >
            <a-list-item slot="renderItem" slot-scope="item">
                <a-comment
                        :author="item.author"
                        :avatar="item.avatar"
                        :content="item.content"
                        :datetime="item.datetime"
                />
            </a-list-item>
        </a-list>
        <a-comment>
            <div slot="content">
                <a-form-item>
                    <a-textarea :rows="4" :value="value" @change="handleChange" placeholder="请发表您对课程的评价"/>
                </a-form-item>
                <a-form-item>
                    <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit" style="float: right">
                        发表评论
                    </a-button>
                </a-form-item>
                <a-rate :default-value="5" disabled style="float: right"/>
            </div>
        </a-comment>
    </div>
</template>
<script>
    import moment from 'moment';
    export default {
        data() {
            return {
                comments: [],
                submitting: false,
                value: '',
                moment,
            };
        },
        methods: {
            handleSubmit() {
                if (!this.value) {
                    return;
                }

                this.submitting = true;

                setTimeout(() => {
                    this.submitting = false;
                    this.comments = [
                        {
                            author: '陈文杰',
                            //头像
                            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                            content: this.value,
                            datetime: moment().fromNow(),

                        },
                        ...this.comments,
                    ];
                    this.value = '';
                }, 1000);
            },
            handleChange(e) {
                this.value = e.target.value;
            },
        },
    };
</script>